<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div class="tag">渠道产品信息</div>
        <a-row>
          <a-col :span="6">
            <a-form-model-item label="物流产品" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-ellipsis :value="model.name" :length="15"></j-ellipsis>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="物流渠道" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-ellipsis :value="model.channelName" :length="15"></j-ellipsis>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item label="报价币种" :labelCol="{xs: { span: 24 },sm: { span: 8 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 15 }}">
              <span>{{ model.currencyType }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="生效时间" :labelCol="{xs: { span: 24 }, sm: { span: 6 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 18 }}">
              <span>{{ model.effectBeginTime }}</span>
              <span v-if="model.effectEndTime"> ~ {{ model.effectEndTime }}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <j-editable-table
          :ref="refKeys[0]"
          :loading="logisticsCostPriceDetailTable.loading"
          :columns="logisticsCostPriceDetailTable.columns"
          :dataSource="logisticsCostPriceDetailTable.dataSource"
          :maxHeight="300"
          disabled
          :rowNumber="true"
          :rowSelection="true"
        />
        <a-divider />
        <div class="tag">分配客户</div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :pagination="ipagination"
          :dataSource="dataSource"
          class="j-table-force-nowrap"
          @change="handleTableChange">
        </a-table>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import { FormTypes,getRefPromise,VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
  import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

  export default {
    name: 'LogisticsInfoForm',
    mixins: [JEditableTableModelMixin, JeecgListMixin],
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {},
        url: {
          queryDetailByMainId: "/logistics/product/logisticsProduct/queryDetailByMainId",
          list: "/logistics/productMerchant/logisticsProductMerchant/list",
        },
        refKeys: ['logisticsCostPriceDetail', ],
        tableKeys:['logisticsCostPriceDetail', ],
        activeKey: 'logisticsCostPriceDetail',
        logisticsCostPriceDetailTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '收费分区',
              key: 'classifyId',
              type: FormTypes.select,
              width:"100px",
              dictCode:"hz_logistics_partition_classify,name,id,logistics",
              placeholder: '请输入${title}',
              defaultValue:'',
              disabled: true
            },
            {
              title: '计费类型',
              key: 'chargeType',
              type: FormTypes.select,
              dictCode:"logistics_charge_type",
              width:"100px",
              placeholder: '请输入${title}',
              defaultValue:'',
              disabled: true
            },
            {
              title: '开始重量段（KG）',
              key: 'startWeight',
              type: FormTypes.inputNumber,
              width:"140px",
              placeholder: '请输入${title}',
              defaultValue:'',
              disabled: true
            },
            {
              title: '结束重量段（KG）',
              key: 'endWeight',
              type: FormTypes.inputNumber,
              width:"140px",
              placeholder: '请输入${title}',
              defaultValue:'',
              disabled: true
            },
            {
              title: '最低计费重（KG）',
              key: 'minChargeWeight',
              type: FormTypes.inputNumber,
              width:"140px",
              placeholder: '',
              defaultValue:'',
              disabled: true
            },
            {
              title: '计费单重（KG）',
              key: 'chargeWeight',
              type: FormTypes.inputNumber,
              width:"140px",
              placeholder: '请输入${title}',
              defaultValue:'',
              disabled: true
            },
            // {
            //   title: '价格值',
            //   key: 'price',
            //   type: FormTypes.inputNumber,
            //   width:"90px",
            //   placeholder: '请输入${title}',
            //   defaultValue:'',
            //   disabled: true
            // },
            // {
            //   title: '挂号费',
            //   key: 'registerFee',
            //   type: FormTypes.inputNumber,
            //   width:"90px",
            //   placeholder: '请输入${title}',
            //   defaultValue:'',
            //   disabled: true
            // },
            {
              title: '公斤费',
              key: 'kiloFee',
              type: FormTypes.inputNumber,
              width:"90px",
              placeholder: '请输入${title}',
              defaultValue:'',
              validateRules: [{ required: true, pattern: /^[0-9]+(\.[0-9]+)?$/, message: '${title}不能小于0' }]
            },
            {
              title: '处理费',
              key: 'processFee',
              type: FormTypes.inputNumber,
              width:"90px",
              placeholder: '请输入${title}',
              defaultValue:'',
              validateRules: [{ required: true, pattern: /^[0-9]+(\.[0-9]+)?$/, message: '${title}不能小于0'}]
            },
          ]
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'客户名称',
            align:"center",
            dataIndex: 'departName'
          },
          {
            title:'客户ID',
            align:"center",
            dataIndex: 'orgCode'
          },
          {
            title:'客户级别',
            align:"center",
            dataIndex: 'departLevel'
          }
        ],
        disableMixinCreated: true
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      test(){
        console.log(JSON.stringify(this.model));
      },
      addBefore(){
        this.logisticsCostPriceDetailTable.dataSource=[]
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        if (this.model.id) {
          //获取分配的客户信息
          this.queryParam = { productCode: this.model.code };
          this.loadData();

          // 加载子表数据
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.queryDetailByMainId, params, this.logisticsCostPriceDetailTable);
        }
      },
      //校验所有一对一子表表单
      validateSubForm(allValues){
        return new Promise((resolve,reject)=>{
          Promise.all([
          ]).then(() => {
            resolve(allValues)
          }).catch(e => {
            if (e.error === VALIDATE_NO_PASSED) {
              // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
              this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
            } else {
              console.error(e)
            }
          })
        })
      },
      /** 整理成formData */
      classifyIntoFormData(allValues){
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
      handleOk_(){}
    }
  }
</script>

<style scoped>
.tag{
  border: 1px solid #1890FF;
  padding: 2px 10px;
  border-radius: 6px;
  color: #1890FF;
  margin-bottom: 4px;
  display: inline-block;
}
/deep/.input-table .scroll-view{
  pointer-events: auto;
}
/deep/.j-table-force-nowrap, /deep/.jeecg-form-container-disabled .ant-select{
  pointer-events: auto;
  cursor: auto;
}
</style>